<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>中信城微信运动会投篮</title>
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/skin.css" rel="stylesheet" />
		<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
		<script src="js/queryloader2.min.js" type="text/javascript"></script>
		<style>
			html {
				height: 100%;
				width: 100%;
			}
			
			body {
				background: url(img/start_bg.jpg) no-repeat;
				background-size: 100% 100%;
				min-height: 100%;
				width: 100%;
			}
		</style>
		<script>
		</script>
	</head>

	<body>
		<div class="count">
			<div class="score-count">
				<p class="count-title">投篮得分</p>
				<div class="bord-container" id="score">
					<div class="bord">0</div>
				</div>
				<p>分/SCORE</p>
			</div>
			<div class="time-count">
				<p class="count-title">剩余时间</p>
				<div class="bord-container" id="timer">
					<div class="bord">3</div>
					<div class="bord">0</div>
				</div>
				<p>秒/SECOND</p>
			</div>
			<div class="clear"></div>
		</div>
		<div class="lanban"></div>
		<div class="ball"></div>
		<div class="person"></div>
		<a id="maskshow" class="btn-toulan">
			<img src="img/btn-join.png" />
		</a>
		<div class="mask" id="mask">
			<p class="pa">
				Are you ready?
				<br/> Let's go!
				<br />
				<span class="countdown" id="countdown">3</span>
			</p>
		</div>
		<div class="mask" id="result" style="display:none;">
			<div style="position:relative; overflow: scroll; height: 100%;">
				<div class="result">
					<div>
						<p class="p1">您一定是篮球界的新星</p>
						<p class="p2">30秒竟然投得<em>258</em><i>分</i></p>
						<p class="p3">成都首届微信运动会之定点投篮
							<br/>您暂时排名<em class="em1">第8名</em>，继续保持
							<br/><em class="em2">小米移动电源</em>在向你招手了!
						</p>
						<p class="p4">活动时间：即日起至12月18日24:00</p>
					</div>
				</div>
				<div class="jiangpin"></div>
				<a>
					<span class="bufu-btn" id="btnShare">
					    <span class="bufu-btn-inner"></span>
					</span>
				</a>
				<a>
					<span class="paiming-btn" id="checkTop">
						<span class="paiming-btn-inner"></span>
					</span>
				</a>
				<a>
					<span class="result-rule-btn" id="checkrRules">
						<span class="result-rule-btn-inner"></span>
					</span>
				</a>
				<div class="bottom_bg"></div>

			</div>
		</div>
		<div class="mask" id="share" style="display:none;">
			<div class="share_bg">
				<div class="share_bg_box"></div>
			</div>
		</div>
		<div id="hdgz" style="display: none;">
			<div class="cover-box">
				<div class="pop-box pop-level">
					<div class="pop-close">
						<b></b>
					</div>
					<div class="pop-content">
						<div class="title"><img src="img/rules-title.png" alt="title" /></div>
						<p class="p1">活动时间：即日起至2015年12月18号24:00</p>
						<p class="p1">咨询电话：028-8588 7888<img src="img/dianhua.png" /></p>
						<p class="p2">/ 参与方式 /</p>
						<p class="p3">
							1、关注【成都中信城】微信号（此活动仅限粉丝参与），点击【趣味运动会】→【定点投篮】按钮，即可开始游戏赢取众多好礼；
							<br />2、快速点击游戏界面的【投篮】按钮，投中一个得2分。系统自动记录得分，根据成绩自动计算排名，该排名仅为游戏的暂时排名；
							<br />3、点击【不服再战】按钮，每分享一次朋友圈即可获得再赛一次的机会，每天不限分享次数，活动结束时以个人参赛的最佳成绩为最终成绩，根据最终成绩计算最终排名。</p>
						<p class="p2">/ 活动奖品及领取须知 /</p>
						<p class="p3">
							1、第1名可获得佳能数码相机一部；
							<br />第2名可获得富士趣奇拍立得相机一部；
							<br />第3名可获得披肩按摩器一个；
							<br />第4-30名可获得得小米移动电源一个；
							<br />2、定点投篮的奖品将在成都中信城右岸售楼部现场发放，凭借本人身份证和微信号以及活动排名页面截图领取奖品，更有机会参加中信城线下趣味运动会，赢取更多好礼；
							<br />3、领奖时间：2015年12月19-20日；
							<br />4、本次活动最终解释权归成都信蜀投资有限公司所有。
							</p3>
					</div>
				</div>
			</div>
		</div>

		<div class="mask popInfo" id="topList">
			<div class="popInfo_content">
				<div id="table">
					<table>
						<tr>
							<th style="width: 60px">排名</th>
							<th style="width: 40px">头像</th>
							<th>昵称</th>
							<th>成绩</th>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200分</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<script>
			$("body").queryLoader2({
				barColor: "#efefef",
				backgroundColor: "#111",
				percentage: true,
				barHeight: 1,
				minimumTime: 200,
				fadeOutTime: 1000,
				onComplete: function() {
					$("#checkTop").bind("click", function(e) {
						$("#topList").addClass("open");
					});
					$("#topList").bind("click", function() {
						$(this).removeClass("open");
					});
					$("#btnShare").bind("click", function() {
						$("#share").show();
					});
					$("#share").bind("click", function() {
						$(this).hide();
					});
					$("#checkrRules").bind("click", function() {
						$("#hdgz").show();
					});
					$("#hdgz").bind("click", function() {
						$(this).hide();
					});
					//						$("#maskshow").bind("click", function() {
					//							$("#result").show();
					//						});
					$(".btn-toulan").bind("touchend", function() {
						toulan();
					});
					ready();
				}
			});
			var run = false;
			var time = 30;
			var score = 0;
			var isover = false;
			var readytime = 3;

			function renderbord(score, con) {
				var b = 0;
				var s = 0;
				var g = 0;
				if (score >= 100) {
					b = parseInt(score / 100);
					s = parseInt((score % 100) / 10);
					g = score % 10;
				} else if (score >= 10) {
					s = parseInt(score / 10);
					g = score % 10;
				} else {
					g = score;
				}
				con.empty();
				if (b) {
					con.append("<div class='bord'>" + b + "</div>")
				}
				if (b || s) {
					con.append("<div class='bord'>" + s + "</div>")
				}
				con.append("<div class='bord'>" + g + "</div>");
			}

			function timer() {
				var con = $("#timer");
				renderbord(time, con);
				if (time == 0) {
					over();
				} else {
					setTimeout(function() {
						time--;
						timer();
					}, 1000);
				}
			}

			function over() {
				isover = true;
				$("#result").show();
			}

			function toulan() {
				if (!isover) score = score + 2;
				var con = $("#score");
				renderbord(score, con);
				if (run || isover) return;
				run = true;
				$(".person").addClass("person2");
				$(".ball").addClass("tl");
				setTimeout(function() {
					$(".person").attr("class", "person");
					$(".ball").hide();
					$(".ball").removeClass("tl");
					$(".lanban").addClass("lanban2");
					setTimeout(function() {
						$(".lanban").addClass("lanban3");
						setTimeout(function() {
							$(".lanban").addClass("lanban4");
							setTimeout(function() {
								$(".lanban").attr("class", "lanban");
								$(".ball").show();
								run = false;
							}, 50);
						}, 50);
					}, 100);
				}, 300);
			}

			function ready() {
				$("#countdown").html(readytime);
				readytime--;
				setTimeout(function() {
					if (readytime == 0) {
						$("#mask").hide();
						timer();
					} else {
						
						ready();
					}
				}, 1000);
			}
			
		</script>
	</body>

</html>